<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <script>
// -------------------------------------------------------------------------------------------------------
var Texts = {}; // The highest indexes of the boxes according to their original texts
// -------------------------------------------------------------------------------------------------------
// Updates text of new or copied box, adds increased index to it
Grids.OnGanttRunBoxNew = function(G,A,copy){
if(A.Type=="milestone"||A.Type=="stop") return false; // Milestone has not text
var txt = A.Text; if(!txt) txt = "";
var pos = txt.search(/\d+/); if(pos>=0) txt = txt.slice(0,pos);
var idx = Texts[txt]+1; if(!idx) idx = 1;
Texts[txt] = idx;
A.Text = txt + idx;
return true;
}
// -------------------------------------------------------------------------------------------------------

   </script>
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; }
      .Tutorial .Main { }
   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>4. Run drag</h1>
   <h2>Resizing, moving, creating, deleting and copying Run boxes</h2>

   <center class="Border" id="Border">
      <div class="Xml">Source: <a href='04-Run_drag.xml'>04-Run_drag.xml</a></div>
      <div class="Main" style='width:100%; height:662px;'>
         <bdo Debug='check' Data_Url='04-Run_drag.xml'></bdo>
      </div>
      <br />
      <div class="Xml">Source: <a href='04-Run_drag2.xml'>04-Run_drag2.xml</a> - Test dragging boxes between grids</div>
      <div class="Main" style='width:100%; height:187px;'>
         <bdo Debug='check' Data_Url='04-Run_drag2.xml'></bdo>
      </div>
   </center>

   <ul>
      <li>
         There are many options for resize, move and copy the run boxes.
         These options can be set for the whole Gantt column or for individual rows.<br />
      </li>
      <li>
         Individual boxes have set their moving and resizing permissions by their <b>type</b> in the GanttRun definition: 
            <b>Box</b> (normal), <b>Fixed</b> (not movable, not resizable), <b>Left</b> (not movable, resizable only right side), 
            <b>Right</b> (not movable, resizable only left side), <b>Solid</b> (not resizable), for more information see previous tutorial.
      </li>
       <li>
         All these dragging attributes (GanttRunResize, GanttRunMove, GanttRunAdjust, GanttRunNew, GanttRunNewStart) can have different values when dragging with shift key (Ctrl, Shift, Alt) and with other mouse button (Right, Middle).<br />
         The value is set by attribute with appropriate suffix, it can be combined mouse button and shift key, the shift key suffix is before the mouse button.<br />
         For example <b>GanttRunResizeCtrl</b>, <b>GanttRunMoveRight</b>, <b>GanttRunAdjustShiftMiddle</b>.
      </li>
      <li>
         <h3>GanttRunResize</h3> attribute controls how the boxes are resized.<br />
         Now there is only one way of resizing boxes, by dragging its edge, so this attribute sets only resizing permissions - 
         <b>empty</b> value means no resizing, "<b>Resize</b>" for resizing resizable boxes, "<b>All</b>" for resizing all boxes. Default value is "Resize".<br />
         The box can be deleted by resizing to zero width when set <h3>GanttResizeDelete</h3><b>='1'</b> (default setting).
      </li>
      <li>
         <h3>GanttRunMove</h3> attribute controls how the boxes are moved or copied inside or outside the row. It controls the <b>source row</b> for dragging.<br />
         To restrict moving at all, set GanttRunMove to <b>empty</b> string.<br />
         <ul>
            <li>
               Default is "<b>Slide</b>" to shift the box left or right only inside its row. It cannot change the box order, except GanttRunAdjust contains "Error".<br />
            </li>
            <li>
               "<b>Move</b>" moves the box inside or outside the row. The original place of the box is filled by empty space.<br />
            </li>
            <li>
               "<b>Remove</b>" moves the box inside or outside the row. The original place of the box is deleted and the other boxes in row are shifted according to GanttRunAdjust setting.<br /> 
            </li>
            <li>
               "<b>Copy</b>" copies the box to the new position inside or outside the row. The original box remains unchanged.<br />
               Calls API event <b>OnGanttRunBoxNew</b>, here you can change especially box Id, because it is duplicate of the original box.
            </li>
            <li>
               There are also other flags controlling which boxes will be moved.<br />
               "<b>All</b>" - also fixed boxes can be moved.<br />
               "<b>Single</b>" - by default are the joined boxes moved together, if used "Single", it moves only the one actual box.<br />
               "<b>Entire</b>" - all boxes in the row, including spaces.<br />
               "<b>Group</b>" - all boxes in the same group in the row; if set also "Entire", preserves spaces between boxes.<br />
               "<b>Selected</b>" - all selected boxes in the row; if set also "Entire", preserves spaces between boxes. The selecting boxes is permitted by <b>GanttRunSelect</b> attribute.<br />
               "<b>Clear</b>" - clears selected boxes after drop.<br />
            </li>
         </ul>
      </li>
      <li>
         <h3>GanttRunAdjust</h3> attribute controls how the other boxes will behave, when some box is shifted inside, dropped to or removed from the row.
         It controls also how the dropped box will be updated. It controls the <b>destination row</b> for dragging.<br />
         The GanttRunAdjust can have different values for GanttRunMove / GanttRunResize actions. These options are set by the attribute with appropriate postfix:
         <b>GanttRunAdjustResize</b>, <b>GanttRunAdjustSlide</b>, <b>GanttRunAdjustMove</b>, <b>GanttRunAdjustRemove</b>, <b>GanttRunAdjustCopy</b>.<br />
         <i>Remember, the order of the keywords is important. For example "Move,Resize" means that the box is first tried to move and next, only if it still cannot be placed, tries to resize it. And the "Resize,Move" will behave differently.</i><br />
         <ul>
            <li>
               <b>Empty</b> value - When set nothing, the box will be moved within surrounding empty space only.
            </li>
            <li>
               Default is "<b>Shift</b>" - The box will be moved or resized within surrounding empty space and if required, the next or previous boxes will be shifted and their empty spaces preserved.
            </li>
            <li>
               "<b>Shrink</b>" - The box will be moved or resized within surrounding empty space and if required, the next or previous boxes will be shifted and their empty spaces shrunk.
            </li>
            <li>
               "<b>Slip</b>" - The next or previous boxes will be shifted, all empty spaces will be preserved, including the adjacent.
            </li>
            <li>
               There are also other flags controlling which boxes can be moved.<br />
               "<b>All</b>" - also fixed boxes can be moved.<br />
               "<b>Single</b>" - when there are more adjacent boxes without space, the surrounding space will be taken as none, especially for Shift and Slip. If not present, the surrounding space is taken as the nearest space.<br />
               "<b>Append</b>" - when dragged to box edge, attaches it to the box without space as adjacent - the boxes will be joined.<br />
               "<b>Inside</b>" - restrict moving boxes outside the existing boxes (before the first and after the last box).<br />
               "<b>Between</b>" - when dragged to box, it places the source box left or right (nearer edge) next to the destination box.<br />
               "<b>Nbsp</b>" - The Nbsp boxes can be automatically resized like Empty boxes, but they are not automatically deleted.<br />

            </li>
            <li>
               Flags controlling how the source box will be changed if there is no room for it.<br />
               "<b>Error</b>" - the box will be moved or resized even if there is no room for it, in this case it will be marked as error.
                  The attribute <h3>GanttRunError</h3> controls behavior of error boxes.
                  <ul style='margin-top:0px;'>
                     <li style='padding-bottom:0px;'>
                        If set <b>GanttRunError='Sort'</b> (default value), the boxes will be sorted according to their start date.
                        The boxes are sorted also on start.
                        <br />
                     </li>
                     <li style='padding-bottom:0px;'>
                        If set <b>GanttRunError='Merge'</b>, the boxes will be merged together. Only Box and Solid boxes are merged.<br />
                     </li>
                  </ul>
               "<b>Resize</b>" - the box will be resized if there is no room for it.<br />
               "<b>Move</b>" - the box will be moved left if there is no room for it (also shifting boxes on left side by Shift/Shrink/Slip will be permitted).<br />
               "<b>Zoom</b>" - when moving between grids, the box will have the same width on screen and its physical width will be changed by difference between zoom in the grids.<br />
            </li>
         </ul>
      </li>
      <li>
         <h3>GanttRunNew</h3> attribute defines the new box that will be created when dragging on empty space. 
         It has the same format as the GanttRun definition except Start / End items.<br />
         It can define also more boxes to create more boxes at once, only the first box will be resized when dragging the new box while creating.<br />
      </li>
      <li>
         <h3>GanttRunNewStart</h3> attribute defines the new box(es) when creating new box in empty cell. It is possible to add here also Start / End boxes to be created too.<br /> 
         It can also specify the definition format Array or JSON for save.
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialRun\s*=\s*(\d+)/), TGIndex = 8;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridRun4", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialRun="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>